import React, { useEffect } from 'react';
import DoctorCard from '@/views/Home/components/DoctorCard/DoctorCard';
import { RightOutline } from 'antd-mobile-icons';
import { SpinLoading, Swiper, Toast } from 'antd-mobile';
import { useEnhanceDispatch, useEnhanceSelector } from '@/hooks';
import { fetchDocList } from '@/store/modules/homeStore';
import { Link } from 'react-router-dom';
import './FollowDoctor.scss';


const FollowDoctor = () => {
  const enhanceDispatch = useEnhanceDispatch();
  const docList = useEnhanceSelector(state => state.homeStore.docList);
  /**
   * @description 获取关注医生列表的回调函数
   * */
  const fetchDoc = async () => {
    try {
      await enhanceDispatch(fetchDocList({ current: 1, pageSize: 50 })).unwrap();
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };

  useEffect(() => {
    fetchDoc();
  }, []);

  return (
    <div className="follow-doctor">
      <div className="head">
        <p>推荐关注</p>
        <Link to="/doctor">查看更多<RightOutline /></Link>
      </div>
      <div className="body">
        {/*swipe 组件*/}
        {docList.length ? <Swiper>
          {
            docList.map(item => {
              return (
                <Swiper.Item key={item.id}>
                  <DoctorCard doctor={item}></DoctorCard>
                </Swiper.Item>
              );
            })
          }
        </Swiper> : <div className="loading"><SpinLoading color="primary" /></div>}
      </div>
    </div>
  );
};

export default FollowDoctor;